<template>
	
	<view>
		
	
		
		
		
			 <zero-custom-bar backgroundColor="white">
			        <view class="lefticon" slot='left' >
			            <button   border="0px" width="10rpx" @click="showDrawer" ><uni-icons type="bars"></uni-icons></button>
			        </view>
			        <view class="" >
			            <h3>订单管理</h3>
			        </view>
					<view class="righticon" slot='right' >
					    <button style="background-color: #f8f8f8;"  @click = "showTag" >{{flag?"收起":"订单详情"}}</button>
					</view>
			        </zero-custom-bar>
			
			<genos-drawer ref="showleft" mode="left" :mask-click="false" statusBar="true">
				
					<button class="closebutton" @click="closeDrawer" type="primary"><icon type="clear"></icon></button>
					<navigator url="/pages/order/myOrder/index/index"><view class="list-item"><button >我的订单</button></view></navigator>
					<navigator url="/pages/order/departmentorder/index/departmentorder"><view class="list-item"><button>部门订单</button></view></navigator>
				    <navigator url="/pages/sys/home/index" open-type="switchTab"><view class="list-item"><button>主页</button></view></navigator>
			</genos-drawer>
			
			
			<view class="out"> 
			<view class="row" v-for="item in jsonData" :key="item.id" >
			
			
			　　　
					
					<view class="item">
						<view class="dingdan-msg"  :class="{active:flag}" >
						<view class="name">客户姓名：{{item.clientName}}</view>
						<view class="ordertime">订单创建时间：{{item. createTime}}</view>
						<view class="orderStatus">订单状态：{{item.orderStatus}}</view>
						<view class="orderId">订单号：{{item.orderId}}</view>
						<view class="orderStatus">联系电话：{{item.phone}}</view>
						<view class="orderStatus">地址：{{item.address}}</view>
						<view class="orderStatus">合作方：{{item.partner}}</view>
						<view class="orderStatus">客户经理：{{item.orderManager}}</view>
						<view class="orderStatus">定金金额：{{item.reserveAmount}}</view>
						<view class="orderStatus">合同金额：{{item.amount}}</view>
						<view class="orderStatus">预估金额：{{item.estimatedAmount}}</view>
						<view class="orderStatus">是否有售后：{{item.afterSales}}</view>
						<view class="orderStatus">售后补单编号：{{item.afterSalesOrder}}</view>
						<view class="orderStatus">备注：{{item.comment}}</view>
						</view>
						
					</view>
					<view class="item">
						<view class="btn" ><button style="background-color: #888;">编辑</button></view>
						<view class="btn" ><button style="background-color: orangered;">删除</button></view>
						
					 </view>
					 	
				
			　　　　
			</view>
			
					
				
				
			
			</view>		
		
			
		</view>
		
		
		
	</template>

<script>
import config from '../../../../common/config'
	export default {
		
		data() {
			return {
			   jsonData:[],
			   flag: false,
			
			}
		},
		onReady() {},
		methods: {
			//获取数据
			getData(){
				this.$u.api.order.listData1({
					"pageNo":1,
					"pageSize":10
				}).then((res)=>{
					console.log(res)
					this.jsonData = res.list
				})
			},
			
			
			showDrawer() {
				this.$refs.showleft.open();
			},
			closeDrawer() {
				this.$refs.showleft.close();
			},
			
		onLoad() {
			this.getData()
		},
		
		 showTag(){
				        this.flag = !this.flag;
				    }, 
		
		
		
	},
	
}
</script>

<style>
page {
		background-color: #f8f8f8;
	}
	
	
	
	
	.closebutton{
		margin-top: 100rpx;
		text-align: center;
		bottom: 10px;
		background-color: darkred;
		
	}
	.list-item{
		text-align: center;
		
		background-color: white;
		width: 100%;
		
	}
	
	.item{
		margin-right: 150rpx;
		/* display: inline-block; */
		
	}
	.btn{
		border: 0px;
		display: inline-block;
		
	}
	
.out{
	padding: 50rpx 30rpx;
	height: 100rpx;
}
.out .row{
	white-space: nowrap;
	padding:20rpx 0;
	border-bottom: 1px dotted #e4e4e4;
	
}
.out .row .name{
	font-zize:36rpx;
	padding-bottom: 15rpx;
	color: #333;
}
.out .row .ordertime{
	font-size: 28rpx;
	color: #888;
}


/* 初始高度，超出隐藏 */
    .dingdan-msg{
        height: 230rpx;
        overflow: hidden;
        line-height: 70rpx;
        border-bottom: 1px dashed #E8E7E7;
    }
/*  高度自适应，全部显示 */
    .active{
        height: auto;
        overflow: visible;
    }


</style>